<!DOCTYPE html>
<html lang="zh-Hans">

<head>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>刚吃花生 - Api - 在线索引</title>

    <link rel="icon" type="image/png" href="img/logo.jpg" />

    <link rel="stylesheet" href="./css/index.css" />


    <style type="text/css">
        @import "./css/small.css"screen and (max-width: 1200px);
        @import "./css/larger.css"screen and (min-width: 1200px);
    </style>
</head>

<body>

    <!-- 大屏-导航栏 -->
    <div class="top_navi_container_bg">
        <div class="top_navi_container_wrapper">
            <div class="top_navi_container">
                <ul id="top_navi_list" class="top_navi_list">
                    <li>
                        <a class="top_navi_list_item" href="./index.html#apis_html_introduce">HTML</a>
                    </li>

                    <li>
                        <a class="top_navi_list_item active" href="./css.html#apis_css_introduce">CSS</a>
                    </li>
                    <li>
                        <a class="top_navi_list_item" href="./javascript.html#apis_javascript_introduce">JavaScript</a>
                    </li>

                    <li>
                        <a class="top_navi_list_item" href="./web.html#apis_web_introduce">Web</a>
                    </li>

                    <li>
                        <a class="top_navi_list_item" href="./book.html#apis_book_introduce">Book</a>
                    </li>
                </ul>
            </div>
            <div class="top_logo_container">
                <img src="img/logo.jpg" alt="logo" />
                <span> 刚吃花生 - Api - 在线索引</span>
            </div>
        </div>
    </div>


    <div class="top_navi_container_holder"></div>

    <!-- 具体的内容 -->
    <div class="center_content_container">
        <!-- 大屏-左侧索引-->
        <div class="left_navi_list_container">
            <div class="left_navi_list_border">
                <ul id="left_navi_list_object" class="left_navi_list_alert">
                    <li>
                        <span class="left_navi_list_hint">导航栏</span>
                    </li>
                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_introduce">介绍</a>
                    </li>
                    <li>
                        <span class="left_navi_list_hint">CSS 用法</span>
                    </li>
                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_length">长度单位</a>
                    </li>

                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_relevance">关联</a>
                    </li>

                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_selector">选择器</a>
                    </li>
                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_pseudoClasses">伪类与伪元素</a>
                    </li>
                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_weight">样式权重</a>
                    </li>
                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_layout">布局</a>
                    </li>
                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_alignment">对齐</a>
                    </li>

                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_flex">Flex布局</a>
                    </li>

                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_grid">Grid布局</a>
                    </li>


                    <li>
                        <span class="left_navi_list_hint">CSS 属性</span>
                    </li>
                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_attr_display">display</a>
                    </li>

                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_attr_width">width</a>
                    </li>
                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_attr_height">height</a>
                    </li>
                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_attr_padding">padding</a>
                    </li>
                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_attr_margin">margin</a>
                    </li>
                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_attr_border">border</a>
                    </li>

                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_attr_position">position</a>
                    </li>
                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_attr_zindex">z-index</a>
                    </li>


                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_attr_top">top</a>
                    </li>

                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_attr_bottom">bottom</a>
                    </li>

                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_attr_left">left</a>
                    </li>

                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_attr_right">right</a>
                    </li>




                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_attr_overflow">overflow</a>
                    </li>

                    <li>
                        <a class="left_navi_list_alert_item" href="#apis_css_attr_float">float</a>
                    </li>
                </ul>
            </div>

        </div>

        <div class="right_content_container">
            <iframe id="content" scrolling="no"></iframe>

            <!-- 小屏-导航栏 -->
            <div id="small_navi_container_bg" class="small_navi_container_bg">
                <ul class="small_navi_list">
                    <li>
                        <span class="small_navi_list_item" onclick="toggleNaviAlert()">CSS</span>
                    </li>

                    <li>
                        <span class="small_navi_list_item" onclick="toggleNaviAlert()">目录</span>
                    </li>
                </ul>

                <div class="small_logo_container">
                    <img src="img/logo.jpg" alt="logo" />
                    <span>在线索引</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 小屏-导航栏-弹窗 -->
    <div id="navi_alert" class="small_navi_alert_container">
        <div class="small_navi_alert_container_mask" onclick="hideNaviAlert()">
            <div class="small_navi_alert_left_content">
                <div class="small_navi_alert_content_border">
                    <ul id="small_navi_list_alert" class="left_navi_list_alert">
                        <li>
                            <a class="left_navi_list_alert_item" href="./index.html#apis_html_introduce">HTML</a>
                        </li>

                        <li>
                            <a class="left_navi_list_alert_item active" href="./css.html#apis_css_introduce">CSS</a>
                        </li>
                        <li>
                            <a class="left_navi_list_alert_item" href="./javascript.html#apis_javacript_introduce">JavaScript</a>
                        </li>
                        <li>
                            <a class="left_navi_list_alert_item" href="./web.html#apis_web_introduce">Web</a>
                        </li>
                        <li>
                            <a class="left_navi_list_alert_item" href="./book.html#apis_book_introduce">Book</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="small_navi_alert_right_content">
                <div class="small_navi_alert_content_border">
                    <ul id="small_navi_list_object" class="left_navi_list_alert">
                        <li>
                            <span class="left_navi_list_hint">导航栏</span>
                        </li>
                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_introduce">介绍</a>
                        </li>
                        <li>
                            <span class="left_navi_list_hint">CSS 用法</span>
                        </li>
                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_length">长度单位</a>
                        </li>

                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_relevance">关联</a>
                        </li>

                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_selector">选择器</a>
                        </li>
                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_pseudoClasses">伪类与伪元素</a>
                        </li>
                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_weight">样式权重</a>
                        </li>
                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_layout">布局</a>
                        </li>
                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_alignment">对齐</a>
                        </li>
                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_flex">Flex布局</a>
                        </li>
                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_grid">Grid布局</a>
                        </li>
                        <li>
                            <span class="left_navi_list_hint">CSS 属性</span>
                        </li>
                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_attr_display">display</a>
                        </li>

                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_attr_width">width</a>
                        </li>
                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_attr_height">height</a>
                        </li>
                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_attr_padding">padding</a>
                        </li>
                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_attr_margin">margin</a>
                        </li>
                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_attr_border">border</a>
                        </li>

                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_attr_position">position</a>
                        </li>
                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_attr_zindex">z-index</a>
                        </li>


                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_attr_top">top</a>
                        </li>

                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_attr_bottom">bottom</a>
                        </li>

                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_attr_left">left</a>
                        </li>

                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_attr_right">right</a>
                        </li>




                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_attr_overflow">overflow</a>
                        </li>

                        <li>
                            <a class="left_navi_list_alert_item" href="#apis_css_attr_float">float</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部索引-->
    <div class="bottom_index_container">
        <div class="copyright">
            <span>© 2019 — 2020</span>
            <span>巫小胖</span>
            <a href="http://www.beian.miit.gov.cn/">粤ICP备18075770号</a>
        </div>
    </div>

    <script type="text/javascript">
        if (!(window.location.hash)) {
            window.location.hash = "#apis_css_introduce";
        }
    </script>

    <script type="text/javascript" src="./js/content_opt.js"></script>
</body>

</html>